<script setup>
import { inject } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const userStore = inject('useUserStore')
const userInfo = userStore.state.userInfo
let props = defineProps({
  imgSrc: {
    type: String,
    required: true
  },
  imgSize: {
    type: Number
  },
  shape: {
    type: String
  }
})
const loginout = () => {
  router.replace('/login')
}
</script>
<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-avatar :src="imgSrc" :size="imgSize" :shape="shape" />
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="router.push('/system/userInfo')">基本资料</el-dropdown-item>
        <el-dropdown-item @click="router.push('/login')">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

</template>
<style lang="scss" scoped>
body {
  margin: 0;
}

.el-dropdown__box {
  display: flex;
  align-items: center;

  .userName {
    margin-left: 10px;
    color: #f0f3f8;
  }

  .el-icon {
    color: #999;
    margin-left: 10px;
  }

  &:active,
  &:focus {
    outline: none;
  }
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
